<script setup lang="ts">
  import { watch, ref } from "vue";
  import { useRoute, useRouter } from "vue-router";
  const
    router = useRouter(),
    route = useRoute(),
    show = ref(false),
    nav = ref<any[]>([]),
    index = ref(""),
    history = ref<Array<{ content: string; path: string; }>>([]),
    ephc = ref("");

  watch(route, (n) => {
    index.value = n.path.toString();
    nav.value = api.nav || [];
    history.value = n.matched.map(n => {
      return { content: `${n.meta.title}`, path: n.path };
    });
    const back = router.options.history.state.back,
      br: any = router.getRoutes().find(e => e.path === back) || { meta: { title: "" } };
    ephc.value = br.meta.title;
    show.value = true;
  }, { immediate: true });
</script>
<template>
  <div class="LayoutPage whf x" v-if="show">
    <TreeElMenu :data="nav" class="zbl" v-model="index" router v-if="nav.length" />
    <div class="ybl oh p1em">
      <el-page-header class="nbx mb1em" :content="ephc" @back="router.back">
        <template #breadcrumb>
          <el-breadcrumb>
            <el-breadcrumb-item v-for="a in history" :to="a.path">{{ a.content }}</el-breadcrumb-item>
          </el-breadcrumb>
        </template>
      </el-page-header>
      <!-- <RouterView v-if="nav.length" />
      <slot name="default" v-else /> -->
      <slot name="default" />
      <RouterView />
    </div>
  </div>
</template>
